import {Card, message, Select} from 'antd';
import React, {useEffect, useState} from 'react';
import {PageContainer} from '@ant-design/pro-layout';
import {queryEthOptionCurrentNet, queryETHOptionNet} from './service';
import {empty, NumberMul} from "@/utils/function";
import {queryUse} from "@/utils/service";
import "@/components/Echarts/EchartsOne";
import EchartsOne from "@/components/Echarts/EchartsOne";

const ETHNet: React.FC = () => {

  // @ts-ignore
  const [series, setSeries] = useState<any>(null);
  const [name, setName] = useState<any>("huozhilin_3");
//投资金额 指数价格  买入数量 买入金额 卖出数量 卖出金额
  const openLinesSum = async () => {
    const msg = await queryETHOptionNet(name);
    const msg2 = await queryEthOptionCurrentNet(name);
    // debugger
    let data = queryUse(msg);
    let newData = queryUse(msg2);
    data.push(newData)
    if (!empty(data)) {

      let dataLines: any = {
        timeList: [],
        usdEquityList: [],
        coinIndexList: [],
        equityList: [],
      }
      //红色的是usd_equity 要除以初始  灰色的是con_index 除以初始  蓝色的是equity
      for (let i in data) {
        dataLines.timeList.push(data[i].insertDate.split(' ')[0]);
        dataLines.usdEquityList.push(
          NumberMul(data[i].usdEquity/data[0].usdEquity,1,4)
        );
        dataLines.coinIndexList.push(
          NumberMul(data[i].coinIndex/data[0].coinIndex,1,4)
        );
        dataLines.equityList.push(
          NumberMul(data[i].equity,1,4)
        );
      }
      let series = {
        title: {
          text: '期权净值曲线图'
        },
        tooltip: {
          trigger: 'axis',
        },
        // toolbox: {
        //   feature: {
        //     saveAsImage: {}
        //   }
        // },
        legend: {
          // data: ['收益']
        },
        xAxis: {
          type: 'category',
          axisTick: {
            show: false,
          },
          axisLabel: {
            showMaxLabel: true,
            // normal
            color: '#333333',
            showMinLabel: true,
            fontSize: 13,
            padding: [10, 4, 10, 4],
          },

          // boundaryGap: ['20%', '20%'],
          axisLine: {
            lineStyle: {
              color: 'rgba(155,155,155,0.7)',
              width: 1,
              type: 'dashed',
            },
          },
          position: 'bottom',
          // splitNumber:8,
          data: dataLines.timeList,
        },
        dataZoom: [
          {
            show: true,
            xAxisIndex: 0,
            type: 'inside',
            start: 0,
            end: 100,
            // minValueSpan: 10,
          },
        ],
        yAxis:
          {
            max(value:any) {
              return value.max > 1.05 ? (value.max + 0.05).toFixed(1) : 1.05;
            },
            min(value:any) {
              return value.min < 0.95 ? (value.min - 0.05).toFixed(1) : 0.95;
            },
          type: 'value',
          position: 'right',
        },
        series: [
          {
            name: '净值（ETH）',
            data: dataLines.equityList,
            type: 'line',
            showSymbol: false,
            itemStyle:{
              color: '#357ad2',
            },
            lineStyle: {
              width:2,
            },
            endLabel: {
              show: true, position: 'right', formatter: (params:any) => {
                if (dataLines.usdEquityList.length - 1 === params.dataIndex) {
                  return  params.value[1];
                } else {
                  return '';
                }
              },
            },
          },
          {
            name: '净值（ETH-INDEX）',
            data: dataLines.coinIndexList,
            type: 'line',
            showSymbol: false,
            itemStyle:{
              color: '#989da2',
            },
            lineStyle: {
              width: 2,
            },
            endLabel: {
              show: true, position: 'right', formatter: (params:any) => {
                if (dataLines.usdEquityList.length - 1 === params.dataIndex) {
                  return  params.value[1];
                } else {
                  return '';
                }
              },
            },
          },

          {
            name: '净值（USD）',
            data: dataLines.usdEquityList,
            type: 'line',
            showSymbol: false,
            itemStyle:{
              color: '#d93838',
            },
            lineStyle: {
              width: 2,
            },
            endLabel: {
              show: true, position: 'right', formatter: (params:any) => {
                if (dataLines.usdEquityList.length - 1 === params.dataIndex) {
                  return  params.value[1];
                } else {
                  return '';
                }
              },
            },
          },
        ]
      }
      setSeries(series);
      // setLastDay(lastDay);
      // handleTradeModal({symbol: record.symbol,})
      // handleDetailModalVisible(true);
    } else {
      message.error("暂无数据")
    }

  }
  useEffect(() => {
    openLinesSum().then(r => {});
  }, [])
  useEffect(() => {
    openLinesSum().then(r => {});
  }, [name])
  return (
    <PageContainer>
      <Card>
          <Select value={name} style={{marginBottom:20}} onChange={(e)=>{
            setName(e);
          }}>
            <Select.Option value={"huozhilin_1"}>
              策略v1.0
            </Select.Option>
          <Select.Option value={"huozhilin_3"}>
              策略v2.0
            </Select.Option>
          </Select>
          <EchartsOne chartId={"ETHNet以太坊期权管理"} series={series}/>
      </Card>
    </PageContainer>
  );
};

export default ETHNet;
